<template>
  <div class="packing-container">
    <el-card>
      <div class="operateContainer">
        <div class="formContainer">
          <el-form inline>
            <el-form-item>
              <el-input
                placeholder="请输入装箱单编号/名称"
                style="width: 250px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="请输入客户名称/编号"
                style="width: 250px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="packingDate"
                type="date"
                placeholder="选择装箱日期"
                style="width: 250px"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="searchOperate">
          <div class="button">
            <el-button type="primary" plain style="width: 80px">重置</el-button>
            <el-button type="primary" style="width: 80px">查询</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <template #header>
        <span style="font-size: 16px; font-weight: bold">装箱单管理</span>
      </template>
      <div class="operate">
        <el-button style="width: 80px" type="primary" @click="addPacking"
          >新增</el-button
        >
        <el-button style="width: 80px" type="primary" plain>导出</el-button>
      </div>
      <el-table :data="tableData" style="margin-top: 15px" border>
        <el-table-column
          type="selection"
          align="center"
          fixed="left"
        ></el-table-column>
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="60"
          fixed="left"
        ></el-table-column>
        <el-table-column
          label="装箱单名称"
          align="center"
          prop="packingName"
          width="100"
          fixed="left"
        >
          <template #="{ row, $index }">
            <el-button link type="primary" @click="gotoDetail">{{
              row.packingName
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="装箱单编号"
          align="center"
          prop="packingNo"
          width="100"
          fixed="left"
        ></el-table-column>
        <el-table-column
          label="装箱日期"
          align="center"
          prop="packingDate"
          width="90"
        ></el-table-column>
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNo"
          width="90"
        ></el-table-column>
        <el-table-column
          label="客户名称"
          align="center"
          prop="customerName"
          width="90"
        ></el-table-column>
        <el-table-column
          label="客户编号"
          align="center"
          prop="customerNo"
          width="90"
        ></el-table-column>
        <el-table-column
          label="箱子长度(CM)"
          align="center"
          prop="length"
          width="120"
        ></el-table-column>
        <el-table-column
          label="箱子宽度(CM)"
          align="center"
          prop="width"
          width="120"
        ></el-table-column>
        <el-table-column
          label="箱子高度(CM)"
          align="center"
          prop="height"
          width="120"
        ></el-table-column>
        <el-table-column
          label="净重(KG)"
          align="center"
          prop="netWeight"
          width="90"
        ></el-table-column>
        <el-table-column
          label="毛重(KG)"
          align="center"
          prop="grossWeight"
          width="90"
        ></el-table-column>
        <el-table-column
          label="包含子箱"
          align="center"
          prop="hasSubBox"
          width="90"
        >
          <template #default="{ row }">
            {{ row.hasSubBox ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              v-if="row.status === 'processing'"
              link
              type="success"
              @click="completePacking(row)"
            >
              完成
            </el-button>
            <el-button
              v-if="row.status === 'pending'"
              link
              type="primary"
              @click="executePacking(row)"
            >
              执行
            </el-button>
            <el-button link type="danger" @click="deletePacking(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="prev,pager,next,jumper,->,sizes,total"
        :total="total"
        @current-change="handler"
        @size-change="sizeHandler"
        style="margin-top: 10px"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { ref } from "vue";
import { useRouter } from "vue-router";

interface PackingItem {
  packingName: string;
  packingNo: string;
  packingDate: string;
  orderNo: string;
  customerName: string;
  customerNo: string;
  length: number;
  width: number;
  height: number;
  netWeight: number;
  grossWeight: number;
  hasSubBox: boolean;
  status: "pending" | "processing" | "completed";
}

// mockData
let tableData = ref<PackingItem[]>([
  {
    packingName: "产品30装箱",
    packingNo: "ZXDH0215",
    packingDate: "2025-06-26",
    orderNo: "XSDD932497",
    customerName: "客户933",
    customerNo: "KHBH55555",
    length: 600,
    width: 50,
    height: 500,
    netWeight: 200,
    grossWeight: 200,
    hasSubBox: false,
    status: "pending",
  },
  // Add more mock data items here...
]);
let $router = useRouter();

// Duplicate the mock data 9 times to fill the table
for (let i = 0; i < 9; i++) {
  tableData.value.push({ ...tableData.value[0] });
}

const addPacking = () => {
  $router.push("/storage/other/addPacking");
};

const gotoDetail = () => {
  $router.push("/storage/other/packingDetail");
};

let packingDate = ref("");
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(tableData.value.length);

const executePacking = (row: PackingItem) => {
  row.status = "processing";
  // Add your execute logic here
  $router.push("/storage/other/ExecutePacking");
};

const completePacking = (row: PackingItem) => {
  row.status = "completed";
  // Add your complete logic here
};

const deletePacking = (row: PackingItem) => {
  const index = tableData.value.indexOf(row);
  if (index !== -1) {
    tableData.value.splice(index, 1);
    total.value = tableData.value.length;
  }
};

const handler = (page: number) => {
  currentPage.value = page;
};

const sizeHandler = (page_size: number) => {
  pageSize.value = page_size;
};
</script>

<style scoped lang="scss">
.packing-container {
  padding: 20px;

  .operateContainer {
    display: flex;
    align-content: center;
    justify-content: space-between;

    .formContainer {
      width: 1060px;
      height: 32px;
      transition: height 0.3s ease;
      overflow: hidden;

      .el-form-item {
        margin-bottom: 0;
      }
    }

    .searchOperate {
      display: flex;
      align-items: center;

      .more {
        margin-left: 20px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
